<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GET 练习</title>
    <!-- <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
      crossorigin="anonymous"
    /> -->
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .container {
            width: 1000px;
            height: auto;
            margin: 50px auto;
            overflow: hidden;
        }

        hr {
            margin: 10px 0;
        }

        .container .hero-list {
            margin: 0 -10px;
        }

        .item {
            width: 10%;
            float: left;
            padding: 0 10px;
            text-align: center;
            margin-bottom: 10px;
        }

        h2 {
            display: inline;
            width: 100px;
            height: 35px;
        }

        button {
            display: inline;
        }

        .item img {
            width: 100%;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>

<body>
    <div class="container">
        <h2>英雄列表</h2>
        <button id="btn1">战士</button>
        <button id="btn2">刺客</button>
        <button id="btn3">坦克</button>
        <button id="btn4">辅助</button>
        <button id="btn5">法师</button>
        <hr />
        <div class="hero-list">
            <!-- 单个的英雄元素 -->
            <!-- <div class="item">
                <img src="https://game.gtimg.cn/images/lgamem/act/lrlib/img/HeadIcon/H_S_10001.png" alt="">
                <h5>盖伦</h5>
            </div> -->
        </div>
    </div>
    <!-- http://api.xiaohigh.com:8090/lol -->
    <script>
        let heroList = document.querySelector(".hero-list");
        let btn1 = document.getElementById("btn1");
        let btn2 = document.getElementById("btn2");
        let btn3 = document.getElementById("btn3");
        let btn4 = document.getElementById("btn4");
        let btn5 = document.getElementById("btn5");
        (async function () {
            try {
                var result = await axios({
                    method: "get",
                    //请求 url
                    url: "http://api.xiaohigh.com:8090/lol",
                });

                console.log(result.status);
                console.log(result.data);
                let { data } = result;
                for (let i = 0; i < data.length; i++) {
                    let div = document.createElement("div");
                    div.className = "item";
                    let img = document.createElement("img");
                    img.src = data[i].avatar;
                    let h5 = document.createElement("h5");
                    h5.innerHTML = data[i].name.substr(0, 6);
                    div.appendChild(img);
                    div.appendChild(h5);
                    heroList.appendChild(div);
                }
            } catch (e) {
                console.log("网络异常，F5往死了按");
            }
        })();

        let btns = document.querySelectorAll("button");

        btns.forEach(item => {
            item.addEventListener('click', async function () {
                heroList.innerHTML = '';
                try {
                    var result = await axios({
                        method: "get",
                        //请求 url
                        url: "http://api.xiaohigh.com:8090/lol",

                        params: {
                            roles: this.innerHTML,
                        },
                    });

                    let { data } = result;
                    for (let i = 0; i < data.length; i++) {
                        let div = document.createElement("div");
                        div.className = "item";
                        let img = document.createElement("img");
                        img.src = data[i].avatar;
                        let h5 = document.createElement("h5");
                        h5.innerHTML = data[i].name.substr(0, 6);
                        div.appendChild(img);
                        div.appendChild(h5);
                        heroList.appendChild(div);
                    }
                } catch (e) {
                    console.log("网络异常，F5往死了按");
                }
            })
        })


    </script>
</body>

</html>